<!-- 搜索表单 -->
<template>
    <div class="container">
      <a-space :size="12">
        <div class="txt">编号: {{ containOceanApplyForm.bh }}</div>
        <div style="max-width: 460px" class="table_wrap">
          <div class="txt">拖车:</div>
          <ele-table-select ref="containerBillRef" :allow-clear="true" placeholder="请选择" value-key="id"
            label-key="billOfLading" v-model:value="containerSelectedValue" :table-config="containerBillTableConfig"
            @clear="containerClear"
            :overlay-style="{ width: '900px', maxWidth: '80%' }" :init-value="containerBillInitValue"
            :disabled="containerBillDisabled" @select="onContainerBillSelect">
            <!-- 角色列 -->
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'roles'">
                <a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
                  {{ item.roleName }}
                </a-tag>
              </template>
            </template>
            <!-- 表头工具栏 -->
            <template #toolbar>
              <ContainerOceanApplysearch @search="searchContainerBill" />
            </template>
          </ele-table-select>
        </div>

        <div style="max-width: 260px" class="table_wrap">
          <div class="txt">海运:</div>
          <ele-table-select ref="oceanRef" :allow-clear="true" placeholder="请选择" value-key="id" label-key="billOfLading"
            v-model:value="oceanSelectedValue" :table-config="oceanTableConfig" :disabled="oceanDisabled"
            @clear="oceanClear"
            :overlay-style="{ width: '900px', maxWidth: '80%' }" :init-value="oceanInitValue" @select="onOceanSelect">
            <!-- 角色列 -->
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'roles'">
                <a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
                  {{ item.roleName }}
                </a-tag>
              </template>
            </template>
            <!-- 表头工具栏 -->
            <template #toolbar>
              <ContainerOceanApplysearch @search="searchOcean" />
            </template>
          </ele-table-select>
        </div>

        <div style="max-width: 260px" class="table_wrap">
          <div class="txt">报关:</div>
          <ele-table-select ref="applyCustomsRef" :allow-clear="true" placeholder="请选择" value-key="id"
            label-key="billOfLading" v-model:value="applyCustomsSelectedValue" :table-config="applyCustomsTableConfig"
            @clear="applyClear"
            :overlay-style="{ width: '900px', maxWidth: '80%' }" :init-value="applyCustomsInitValue"
            :disabled="applyCustomsDisabled" @select="onApplyCustomsSelect">
            <!-- 角色列 -->
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'roles'">
                <a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
                  {{ item.roleName }}
                </a-tag>
              </template>
            </template>
            <!-- 表头工具栏 -->
            <template #toolbar>
              <ContainerOceanApplysearch @search="searchApplyCustoms" />
            </template>
          </ele-table-select>
        </div>
        <div class="txt">
          <a-popconfirm title="确定要绑定此项吗？" @confirm="save()">
            <a-button type="primary">绑定</a-button>
          </a-popconfirm>
        </div>
        <div class="txt">
          <a-button type="primary" @click="empty">清空</a-button>
        </div>
        <div class="txt">
          <a-popconfirm title="确定要解绑此项吗？" @confirm="remove()">
            <a-button type="primary" danger>移除绑定</a-button>
          </a-popconfirm>
        </div>
      </a-space>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';
import ContainerOceanApplysearch from './containerOceanApply-search.vue';
import { pageUsers } from '@/api/system/user';
import { pageContainerBills, getContainerOceanApply, saveContainerOceanApply, removeContainerOceanApply } from '@/api/order/containerBill';
import { pageOcean } from '@/api/order/ocean';
import { pageApplyCustoms } from '@/api/order/applyCustoms';


const containerSelectedValue = ref();
const oceanSelectedValue = ref();
const applyCustomsSelectedValue = ref();

// 选择框实例
const containerBillRef = ref(null);
const oceanRef = ref(null);
const applyCustomsRef = ref(null);

// 表格配置
const containerBillTableConfig = reactive({
  datasource: ({ page, limit, where, orders }) => {
    return pageContainerBills({ ...where, ...orders, page, limit });
  },
  columns: [
    {
      title: '客户名称',
      key: 'customer',
      width: 100,
      dataIndex: 'customer',
      showSorterTooltip: false
    },
    {
      title: '做箱日期',
      dataIndex: 'factoryPackDate',
      width: 100,
    },

    {
      title: '提单号',
      dataIndex: 'billOfLading',
      resizable: true,
      width: 140,
      // sorter: true
    },
    {
      title: '箱号',
      dataIndex: 'boxNum',
      width: 80,
      // sorter: true
    },
  ],
  toolbar: true,
  pageSize: 5,
  pageSizeOptions: ['5', '10', '15', '20'],
  size: 'small',
  rowSelection: {
    columnWidth: 38,
    fixed: 'left'
  },
  scroll: { x: 480 }
});

// 表格配置
const oceanTableConfig = reactive({
  datasource: ({ page, limit, where, orders }) => {
    return pageOcean({ ...where, ...orders, page, limit });
  },
  columns: [
    {
      title: '客户名称',
      key: 'customer',
      width: 100,
      dataIndex: 'customer',
      showSorterTooltip: false
    },
    {
      title: '订舱代理',
      key: 'bookingAgent',
      width: 100,
      dataIndex: 'bookingAgent',
      showSorterTooltip: false
    },
    {
      title: '船公司',
      key: 'shippingCompany',
      width: 100,
      dataIndex: 'shippingCompany',
      showSorterTooltip: false
    },
    {
      title: '开船日期',
      dataIndex: 'sailingDate',
      key: 'sailingDate',
      width: 100,
    },

    {
      title: '提单号',
      dataIndex: 'billOfLading',
      resizable: true,
      width: 140,
      // sorter: true
    },
    {
      title: '箱号',
      dataIndex: 'boxNum',
      width: 80,
      // sorter: true
    },
  ],
  toolbar: true,
  pageSize: 5,
  pageSizeOptions: ['5', '10', '15', '20'],
  size: 'small',
  rowSelection: {
    columnWidth: 38,
    fixed: 'left'
  },
  scroll: { x: 480 }
});

// 表格配置
const applyCustomsTableConfig = reactive({
  datasource: ({ page, limit, where, orders }) => {
    return pageApplyCustoms({ ...where, ...orders, page, limit });
  },
  columns: [
    // {
    //   title: 'id',
    //   key: 'id',
    //   dataIndex: 'id',
    //   width: 100,
    //   dataIndex: 'id',
    //   showSorterTooltip: false
    // },
    {
      title: '客户名称',
      key: 'customer',
      width: 100,
      dataIndex: 'customer',
      showSorterTooltip: false
    },
  {
    title: '提单号',
    dataIndex: 'billOfLading',
    key: 'billOfLading',
    // sorter: true
  },
   {
    title: '报关代理',
    dataIndex: 'customsAgent',
    key: 'customsAgent',
    // sorter: true
  },
  {
    title: '报关日期',
    dataIndex: 'customsDate',
    key: 'customsDate',
    // sorter: true
  },
    {
    title: '报关地',
    dataIndex: 'customsPlace',
    key: 'customsPlace',
    // sorter: true
  },
  ],
  toolbar: true,
  pageSize: 5,
  pageSizeOptions: ['5', '10', '15', '20'],
  size: 'small',
  rowSelection: {
    columnWidth: 38,
    fixed: 'left'
  },
  scroll: { x: 480 }
});

// 禁用

// 回显值
const containerBillInitValue = ref();
const oceanInitValue = ref();
const applyCustomsInitValue = ref();
let containOceanApplyForm = reactive({
  bh: '',
})
/* 回显数据 */
const setContainerBillInitValue = () => {
  containerBillInitValue.value = {
    id: 18 + '',
    billOfLading: 'NBOZ00751600'
  };
};

/* 回显数据 */
const setOceanInitValue = () => {
  oceanInitValue.value = {
    id: 18 + '',
    billOfLading: 'NBOZ00751600'
  };
};

/* 回显数据 */
const setApplyCustomsInitValue = () => {
  applyCustomsInitValue.value = {
    id: 18 + '',
    billOfLading: 'NBOZ00751600'
  };
};
/* 总回显数据 */
const setInitValue = () => {
  containerBillInitValue.value = {
    id: containOceanApplyForm.containbillId,
    billOfLading: containOceanApplyForm.containbillLading
  };
  oceanInitValue.value = {
    id: containOceanApplyForm.oceanId,
    billOfLading: containOceanApplyForm.oceanLading
  };
  applyCustomsInitValue.value = {
    id: containOceanApplyForm.applyId,
    billOfLading: containOceanApplyForm.applyLading
  };
};
function views(data) {
  containOceanApplyForm.id = data.id ?? ''
  containOceanApplyForm.bh = data.bh ?? ''
  containOceanApplyForm.containbillId = data.containbillId ?? ''
  containOceanApplyForm.containbillLading = data.containbillLading ?? ''
  containOceanApplyForm.oceanId = data.oceanId ?? ''
  containOceanApplyForm.oceanLading = data.oceanLading ?? ''
  containOceanApplyForm.applyId = data.applyId ?? ''
  containOceanApplyForm.applyLading = data.applyLading ?? ''
  setInitValue()
}

function removeContaiOceanApplyFormData() {
  containOceanApplyForm.id = ''
  containOceanApplyForm.bh = ''
  containOceanApplyForm.containbillId = ''
  containOceanApplyForm.containbillLading = ''
  containOceanApplyForm.oceanId = ''
  containOceanApplyForm.oceanLading = ''
  containOceanApplyForm.applyId = ''
  containOceanApplyForm.applyLading = ''
  setInitValue()
}

// 禁用
const containerBillDisabled = ref(false);
const oceanDisabled = ref(false);
const applyCustomsDisabled = ref(false);
/* 选中事件 */
const onContainerBillSelect = (item) => {
  containOceanApplyForm.containbillId = item.id
  containOceanApplyForm.containbillLading = item.billOfLading
  if (item.son_type == 'containerBill') {
    containerBillDisabled.value = true
  }
  getContainerOceanApply({ 'containbillId': item.id }).then((data) => {
    views(data)
  }).catch((e) => {
    containerBillInitValue.value = {
    id: containOceanApplyForm.containbillId,
    billOfLading: containOceanApplyForm.containbillLading
  };
  });
};
const onOceanSelect = (item) => {
  containOceanApplyForm.oceanId = item.id
  containOceanApplyForm.oceanLading = item.billOfLading
  if (item.son_type == 'ocean') {
    oceanDisabled.value = true
  }
  getContainerOceanApply({ 'oceanId': item.id }).then((data) => {
    views(data)
  }).catch((e) => {
  oceanInitValue.value = {
    id: containOceanApplyForm.oceanId,
    billOfLading: containOceanApplyForm.oceanLading
  };
  });
};

/* 选中事件 */
const onApplyCustomsSelect = (item) => {
  containOceanApplyForm.applyId = item.id
  containOceanApplyForm.applyLading = item.billOfLading
  if (item.son_type == 'applyCustoms') {
    applyCustomsDisabled.value = true
  }
  getContainerOceanApply({ 'applyId': item.id }).then((data) => {
    views(data)
  }).catch((e) => {
  applyCustomsInitValue.value = {
    id: containOceanApplyForm.applyId,
    billOfLading: containOceanApplyForm.applyLading
  };
  });
};
defineExpose({ removeContaiOceanApplyFormData, onContainerBillSelect, onOceanSelect, onApplyCustomsSelect })

const containerClear = () => {
  containOceanApplyForm.containbillId = ''
  containOceanApplyForm.containbillLading = ''
}
const oceanClear = () => {
  containOceanApplyForm.oceanId = ''
  containOceanApplyForm.oceanLading = ''
}
const applyClear = () => {
  containOceanApplyForm.applyId = ''
  containOceanApplyForm.applyLading = ''
}

// 搜索
const searchContainerBill = (where) => {
  containerBillRef.value?.reload({
    where,
    page: 1
  });
};
// 搜索
const searchOcean = (where) => {
  oceanRef.value?.reload({
    where,
    page: 1
  });
};
// 搜索
const searchApplyCustoms = (where) => {
  applyCustomsRef.value?.reload({
    where,
    page: 1
  });
};

//保存
const save = () => {
  saveContainerOceanApply(containOceanApplyForm).then((msg) => {
    removeContaiOceanApplyFormData()
    message.success(msg);
  }).catch((e) => {
    message.error(e.message);
  });
}
//清空
const empty = () => {
  removeContaiOceanApplyFormData()
}
//解绑
const remove = () => {
  removeContainerOceanApply(containOceanApplyForm).then((msg) => {
    removeContaiOceanApplyFormData()
    message.success(msg);
  }).catch((e) => {
    message.error(e.message);
  });
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: flex-start;

  margin-top: 20px;
  margin-bottom: 50px;

  .txt {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }

  .table_wrap {
    display: flex;
    align-items: center;
  }
}
</style>
